<template>
	<!-- 滚动容器：占满屏幕剩余高度，小屏幕可滚动 -->
	<scroll-view class="page-scroll" scroll-y :style="{ height: scrollHeight + 'px' }">
		<!-- 顶部标签栏 -->
		<view class="top-tabs">
			<view class="tab-item" :class="{ active: currentTab === 0 }" @click="currentTab = 0">要闻</view>
			<view class="tab-item" :class="{ active: currentTab === 1 }" @click="currentTab = 1">推荐</view>
			<view class="tab-item" :class="{ active: currentTab === 2 }" @click="currentTab = 2">关注流</view>
			<view class="tab-item" :class="{ active: currentTab === 3 }" @click="currentTab = 3">24小时</view>
			<view class="tab-item" :class="{ active: currentTab === 4 }" @click="currentTab = 4">娱乐</view>
			<view class="tab-item" :class="{ active: currentTab === 5 }" @click="currentTab = 5">桂林</view>
			<view class="tab-item" :class="{ active: currentTab === 6 }" @click="currentTab = 6">财经</view>
		</view>

		<!-- 天气&搜索栏 -->
		<view class="weather-search">
			<text class="weather-text">4℃ 小雨 桂林 PM2.59</text>
			<view class="search-box">
				<input class="search-input" placeholder="搜索关键词" v-model="searchKeyword" @confirm="handleSearch" />
			</view>
		</view>

		<!-- 内容更新提示 -->
		<view class="update-tip">为您更新了15条内容</view>

		<!-- 新闻列表 -->
		<view class="news-list">
			<CustomTextView v-for="(item, index) in filteredNewsList" :key="index" :title="item.title"
				:isTop="item.isTop" :author="item.author" :comments="item.comments" :img-url="item.imgUrl" />
		</view>

		<!-- 广告区域 -->
		<view class="ad-area">
			<text class="ad-text">加微信交友群，喜欢就聊，找喜欢的人</text>
			<view class="ad-images">
				<image :src="'/static/ad/1.png'" mode="aspectFill"></image>
				<image :src="'/static/ad/2.png'" mode="aspectFill"></image>
				<image :src="'/static/ad/3.png'" mode="aspectFill"></image>
			</view>
			<view class="ad-label-row">
				<text class="ad-label">广告</text>
				<text class="ad-desc">我主良缘文化</text>
			</view>
		</view>
		<!-- 底部四个按钮 -->
		<view class="bottom-tabs">
			<view class="tab-item active">新闻</view>
			<view class="tab-item">视频</view>
			<view class="tab-item">话题</view>
			<navigator url="/pages/components/Login/Login" open-type="reLaunch">
				<view class="tab-item">未登录</view>
			</navigator>
		</view>
		<view class="bottom-padding"></view>
	</scroll-view>
</template>

<script>
	import Data from '../../Data/news.json';
	import CustomTextView from '../../components/NewsView.vue';

	export default {
		components: {
			CustomTextView
		},
		data() {
			return {
				searchKeyword: '',
				currentTab: 1, // 默认选中“推荐”
				scrollHeight: 0, // 滚动容器高度（动态计算）

			};
		},
		// computed: {
		// 	filteredNewsList() {
		// 		if (!this.searchKeyword.trim()) return this.newsList;
		// 		const keyword = this.searchKeyword.trim().toLowerCase();
		// 		return this.newsList.filter(item =>
		// 			item.title.toLowerCase().includes(keyword) ||
		// 			item.author.toLowerCase().includes(keyword)
		// 		);
		// 	}
		// },
		onLoad() {
			this.calcScrollHeight();
			this.filteredNewsList = Data.newslist;
			console.log("新闻数据初始化完成：", this.news);
		},
		onResize() {
			this.calcScrollHeight();
		},
		methods: {
			calcScrollHeight() {
				uni.getSystemInfo({
					success: (res) => {
						const tabBarHeight = res.safeAreaInsets.bottom || 100;
						this.scrollHeight = res.windowHeight - res.statusBarHeight - tabBarHeight;
					}
				});
			},
			handleSearch() {
				console.log('搜索关键词：', this.searchKeyword);
			}
		}
	};
</script>

<style scoped>
	.page-scroll {
		width: 100%;
		background-color: #fafafa;
	}

	/* 顶部标签栏 */
	.top-tabs {
		display: flex;
		background-color: #e63946;
		color: white;
		padding: 16rpx 20rpx;
		overflow-x: auto;
		white-space: nowrap;
	}

	.tab-item {
		padding: 0 20rpx;
		font-size: 28rpx;
		margin-right: 30rpx;
	}

	.tab-item.active {
		font-weight: bold;
		color: #ffcc00;
	}

	/* 天气&搜索栏 */
	.weather-search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 30rpx;
		background-color: #e63946;
		color: white;
	}

	.weather-text {
		font-size: 28rpx;
		color: white;
	}

	.search-box {
		background-color: white;
		padding: 12rpx 20rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		color: #999;
		width: 480rpx;
	}

	.search-input {
		flex: 1;
		background-color: transparent;
		color: #666;
		font-size: 24rpx;
	}

	.search-input::placeholder {
		color: #999;
	}

	/* 内容更新提示 */
	.update-tip {
		background-color: #ff9966;
		color: #333;
		font-size: 24rpx;
		padding: 12rpx 30rpx;
	}

	/* 新闻列表 */
	.news-list {
		background-color: white;
	}

	/* 广告区域（重点适配） */
	.ad-area {
		padding: 24rpx 30rpx;
		background-color: white;
		border-top: 1px solid #f5f5f5;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.ad-text {
		color: #666;
		font-size: 32rpx;
		line-height: 1.5;
		display: block;
	}

	.ad-images {
		display: flex;
		gap: 20rpx;
	}

	.ad-images image {
		width: calc(100% / 3 - 14rpx);
		height: 220rpx;
		border-radius: 16rpx;
	}

	.ad-label-row {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.ad-label {
		color: #007AFF;
		font-size: 24rpx;
	}

	.ad-desc {
		color: #666;
		font-size: 24rpx;
	}

	.bottom-padding {
		height: 120rpx;
	}

	.bottom-tabs {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		border-top: 1px solid #eee;
		padding: 10px 0;
	}

	.bottom-tabs .tab-item {
		flex: 1;
		text-align: center;
		font-size: 12px;
		color: #666;
	}

	.bottom-tabs .tab-item.active {
		color: #e63946;
	}
</style>